<script setup lang="ts">
import { Timezone } from '../../../enums'
import useConfigStore from '../../../store/config'
import useMicroStore from '../../../store/micro'

const { $t } = useMicroStore()
const configStore = useConfigStore()

const list = ref([
  {
    label: 'UTC+0',
    value: Timezone.UTC_0,
  },
  {
    label: 'UTC+1',
    value: Timezone.UTC_PLUS_1,
  },
  {
    label: 'UTC+2',
    value: Timezone.UTC_PLUS_2,
  },
  {
    label: 'UTC+3',
    value: Timezone.UTC_PLUS_3,
  },
  {
    label: 'UTC+4',
    value: Timezone.UTC_PLUS_4,
  },
  {
    label: 'UTC+5',
    value: Timezone.UTC_PLUS_5,
  },
  {
    label: 'UTC+6',
    value: Timezone.UTC_PLUS_6,
  },
  {
    label: 'UTC+7',
    value: Timezone.UTC_PLUS_7,
  },
  {
    label: 'UTC+8',
    value: Timezone.UTC_PLUS_8,
  },
  {
    label: 'UTC+9',
    value: Timezone.UTC_PLUS_9,
  },
  {
    label: 'UTC+10',
    value: Timezone.UTC_PLUS_10,
  },
  {
    label: 'UTC+11',
    value: Timezone.UTC_PLUS_11,
  },
  {
    label: 'UTC+12',
    value: Timezone.UTC_PLUS_12,
  },
  {
    label: 'UTC-1',
    value: Timezone.UTC_MINUS_1,
  },
  {
    label: 'UTC-2',
    value: Timezone.UTC_MINUS_2,
  },
  {
    label: 'UTC-3',
    value: Timezone.UTC_MINUS_3,
  },
  {
    label: 'UTC-4',
    value: Timezone.UTC_MINUS_4,
  },
  {
    label: 'UTC-5',
    value: Timezone.UTC_MINUS_5,
  },
  {
    label: 'UTC-6',
    value: Timezone.UTC_MINUS_6,
  },
  {
    label: 'UTC-7',
    value: Timezone.UTC_MINUS_7,
  },
  {
    label: 'UTC-8',
    value: Timezone.UTC_MINUS_8,
  },
  {
    label: 'UTC-9',
    value: Timezone.UTC_MINUS_9,
  },
  {
    label: 'UTC-10',
    value: Timezone.UTC_MINUS_10,
  },
  {
    label: 'UTC-11',
    value: Timezone.UTC_MINUS_11,
  },
  {
    label: 'UTC-12',
    value: Timezone.UTC_MINUS_12,
  },
])

function onTimezoneChange(timezone: Timezone) {
  configStore.setTimezoneName(timezone)
}
</script>

<template>
  <ElDropdown
    style="color:inherit"
    class="min-w-50px"
    @command="onTimezoneChange"
  >
    <div class="flex items-center">
      {{ $t('时区') }}
      <BaseIcon icon="carbon:chevron-down" />
    </div>
    <template #dropdown>
      <ElDropdownMenu class="max-h-300px overflow-auto">
        <ElDropdownItem
          v-for="item in list"
          :key="item.value"
          :command="item.value"
          :class="{ 'timezone-item-active': item.value === configStore.timezoneName }"
        >
          {{ item.label }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="less" scoped>
:deep(.el-dropdown-menu__item.timezone-item-active) {
  color: var(--el-color-primary);
}
</style>
